<template>
  <!-- 顾问服务 -->
  <div>
    <div>
      <div class="contnetTop_box"
        :style="{ background: `url(${getAssetsImages('bg-img')}) no-repeat`, 'background-size': '100%' }">
        <div class="head-box h-360 Mian">
          <div class="contnetTop  ">
            <div class="center_close">
              <span class="contnetTop_title">遇到法律问题实时咨询</span>
            </div>
            <div>
              <span class="contnetTop_info">足不出户即享专属法律顾问服务</span>
            </div>
            <div class="mar-t20">
              <el-button color="#0052d9">立即咨询</el-button>
            </div>
          </div>
        </div>
      </div>

      <div style="background: #fff">
        <div class="contnet-box Mian">
          <div class="search-ipt mar-t35 ">
            <el-space :size="size" :spacer="spacer">
              <div class="dropdown">
                <el-dropdown>
                  <div class="flex-a">
                    <div class="mar-r0 w-50">长沙市</div>
                    <el-icon>
                      <ArrowDown size="12" />
                    </el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>长沙市</el-dropdown-item>
                      <el-dropdown-item>Action 2</el-dropdown-item>
                      <el-dropdown-item>Action 3</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div class="case">
                顾问服务
              </div>
              <div class="dropdown">
                <el-dropdown>
                  <div class="flex-a">
                    <div class="mar-r0 w-80">选择服务项</div>
                    <el-icon>
                      <ArrowDown size="12" />
                    </el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>长沙市</el-dropdown-item>
                      <el-dropdown-item>Action 2</el-dropdown-item>
                      <el-dropdown-item>Action 3</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div>
                <div class="input-label flex gap-4 ">
                  <span>姓名</span>
                  <div>
                    <el-input v-model="input1" style="width: 200px" placeholder="请输入姓名" />
                  </div>
                </div>
              </div>
              <div>
                <div class="input-label flex gap-4">
                  <span>手机</span>
                  <div>
                    <el-input v-model="input1" style="width: 200px" placeholder="请输入联系方式" />
                  </div>
                </div>
              </div>
            </el-space>

          </div>
          <div class="search-btn ">
            <el-button type="primary" color="#0048D4">立即咨询</el-button>
          </div>
        </div>
        <!-- 优选律师 -->
        <lawyerCarousel />
        <!--诉讼案件 -->
        <div style="background: #F2F5F9">
          <div class=" Mian">
            <div class="lawsuit_main">
              <div class="lawsuit_title">
                法律咨询
              </div>
              <!-- <div class="lawsuit_content">
                <div class="suit_content">

                  <div class="triangle"></div>
                  <div class="suit_title">主诉案件</div>
                  <div class="suit_title1">我是原告</div>
                </div>
                <div class="buit_content">
                  <div class="buit_title">被诉案件</div>
                  <div class="buit_title1">我是被告/第三人</div>
                </div>
              </div> -->
              <div class="cardMain">
                <div class="LegalAdvice">
                  <div class="legalAdvice_content">
                    <div>电话咨询</div>
                    <div>遇到法律问题实时咨询，足不出户即享专属法律顾问服务</div>
                    <div class="button">
                      <span>立即咨询</span>
                    </div>
                  </div>
                </div>
                <div class="legalAdvice_remain" v-for="(item, index) in 2" :key="index">
                  <div class="legalAdvice_remain-content">
                    <div>
                      <el-image style="width: 60px; height: 60px"
                        src="https://pic.imgdb.cn/item/65fc18e49f345e8d03756f8c.png"></el-image>
                    </div>
                    <div class="legalAdvice_remain-content-info">
                      <div>图文咨询</div>
                      <div>遇到法律问题实时咨询，足不出户即享专属法律顾问服务</div>
                      <div class="button">
                        <span>立即咨询</span>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
        <div style="background: #fff">
          <div class="padlr320 Mian">
            <!-- 维权 -->
            <div class="padlr320 ">
              <div class="safeguardMain">
                <div class="safeguard_title">
                  常年法律顾问
                </div>
                <div class="cardMain">
                  <el-card shadow="always" v-for="(item, index) in 2" :key="index">
                    <div class="safeguard_content">
                      <div class="safeguard_img">
                        <div class="safeguard_img_title">
                          <div class="line"></div>
                          <div class="safeguard_img_title_text">高阶版常法服务</div>
                        </div>
                        <div class="safeguard_img_content">
                          <div class="safeguard_img_content_left">
                            <ul>
                              <li>
                                <span class="safeguard_line-nospan">电话咨询</span>
                                <span class="safeguard_line-span">无限次数</span>
                              </li>
                              <li>
                                <span class="safeguard_line-nospan">图文咨询</span>
                                <span class="safeguard_line-span">无限次数</span>
                              </li>
                              <li>
                                <span class="safeguard_line-nospan">法律文书服务</span>
                                <span class="safeguard_line-number">2N次</span>
                              </li>
                            </ul>
                          </div>
                          <div class="safeguard_img_content_right">
                            <ul>
                              <li>
                                <span class="safeguard_line-nospan">线下咨询</span>
                                <span class="safeguard_line-number">2N次</span>
                              </li>
                              <li>
                                <span class="safeguard_line-nospan">合同服务</span>
                                <span class="safeguard_line-number">2N次</span>
                              </li>
                            </ul>
                          </div>

                        </div>
                      </div>
                      <div class="safeguard_info">
                        <div class="safeguard_info_title1">
                          <span>咨询客服</span>
                        </div>
                        <div class="safeguard_info_title2">
                          <span>立即购买</span>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <serviceProcess />
      <div style="background: #fff">
        <superiority></superiority>
      </div>
      <DetailsCs></DetailsCs>
    </div>

  </div>
</template>

<script setup>
import { h, ref, reactive, computed } from 'vue'
import { ElDivider } from 'element-plus'
import superiority from "@/components/lawyer/superiority.vue"
import DetailsCs from "@/components/lawyer/details.vue"
import serviceProcess from "@/components/lawyer/serviceProcess.vue"
import lawyerCarousel from "@/components/lawyer/lawyerCarousel.vue"

const size = ref(30)
const spacer = h(ElDivider, { direction: 'vertical' })
const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
const masking = reactive([
  {
    title: '专属顾问咨询',
    sotr: '01'
  },
  {
    title: '提交订单',
    sotr: '02'
  },
  {
    title: '签订代理协议',
    sotr: '03'
  },
  {
    title: '匹配专业律师',
    sotr: '04'
  },
  {
    title: '律师提供服务',
    sotr: '05'
  },
  {
    title: '服务完成评价',
    sotr: '06'
  },

])
// const zeroFill = num => {
//   return num < 10 ? `0${num}` : num
// }
const activeName = ref('first')
</script>

<style lang="scss" scoped>
.Mian {
  width: 1920px !important;
  margin: 0 auto;
}

.head-box {

  padding: 100px 200px;
}

.contnetTop {
  position: absolute;
  // left: 50px;
  margin-left: 150px;

  .center_close {
    width: 520px;

    .contnetTop_title {
      width: 480px;
      height: 67px;
      font-size: 48px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: Medium;
      text-align: left;
      color: #202020;
      line-height: 67px;
    }


  }

  .contnetTop_info {
    width: 490px;
    height: 42px;
    opacity: 0.7;
    font-size: 30px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #202020;
    line-height: 42px;
    letter-spacing: 5px;
  }

  .el-button {
    width: 140px;
    height: 44px;

    // background: #0052d9;
    // border-radius: 4px;
    // width: 64px;
    // height: 22px;
    span {
      font-size: 18px;
      font-family: PingFang TC, PingFang TC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #ffffff;
      line-height: 22px;
    }
  }
}



.contnet-box {
  width: 100%;
  // margin: 0 80px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  // width: 1300px;

  .case {
    // width: 64px;
    height: 22px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #222426;
    line-height: 23px;
  }

  .search-ipt {
    // width: 100%;
    width: 1150px;
    height: 64px;
    background: #ffffff;
    border: 1px solid #1752d9;
    border-radius: 4px 0px 0px 4px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .dropdown {
      // width: 100px;
      line-height: 10px;
      text-align: center;
    }


    .input-label {
      display: flex;
      align-items: center;

      // margin-top: 10px;
      span {
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #222426;
        line-height: 23px;
      }

    }
  }

  .search-btn {

    width: 160px;
    height: 64px;
    background: #0052d9;
    border-radius: 0px 4px 4px 0px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #ffffff;
    // line-height: 55px;

    .el-button {
      width: 160px;
      height: 64px;
    }
  }
}

:deep(.el-input__wrapper) {
  border: none !important;
  box-shadow: none !important;
  padding: 0px; //前边边距去掉
}



.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

:deep(.el-carousel__container) {
  height: 400px !important;

}

:deep(.el-card) {
  border: none !important;
  box-shadow: none !important;
}

.lawsuit_main {
  // margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #F2F5F9;

  .lawsuit_title {
    margin: 40px 0 40px 0;
    width: 112px;
    height: 50px;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #181818;
    line-height: 50px;

  }



  .cardMain {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 1300px;
    margin-bottom: 50px;

    // padding: 0 320px;
    // margin: 0 180px;
    .LegalAdvice {
      width: 500px;
      height: 158px;
      background: #0056DE;
      background: url("@/assets/serviceImgs/dhzx.png") no-repeat;
      background-size: 100% 100%;
      display: flex;

      .legalAdvice_content {
        padding: 20px 30px;

        :nth-child(1) {
          width: 64px;
          height: 22px;
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: Medium;
          text-align: left;
          color: #ffffff;
          line-height: 22px;
          margin-bottom: 10px;
        }

        :nth-child(2) {
          width: 250px;
          height: 44px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #ffffff;
          line-height: 22px;
          margin-bottom: 15px;
        }

        .button {
          width: 100px;
          height: 32px;
          background: #ffffff;
          border-radius: 2px;
          display: flex;
          justify-content: center;
          align-items: center;

          span {
            width: 56px;
            height: 20px;
            font-size: 14px;
            font-family: PingFang TC, PingFang TC-Regular;
            font-weight: Regular;
            text-align: right;
            color: #0052d9;
            line-height: 30px;
          }
        }


      }
    }

    .legalAdvice_remain {
      width: 360px;
      height: 158px;
      background: #fff;

      .legalAdvice_remain-content {
        display: flex;
        // align-items: center;
        justify-content: center;
        padding: 10px;

        .legalAdvice_remain-content-info {
          flex: 1;
          margin-left: 10px;

          :nth-child(1) {
            width: 64px;
            height: 22px;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: Medium;
            text-align: left;
            color: #202020;
            line-height: 22px;
            margin-top: 5px;

          }

          :nth-child(2) {
            width: 253px;
            height: 44px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #575966;
            line-height: 22px;
            margin-top: 15px;
          }

          :nth-child(3) {
            width: 100px;
            height: 32px;
            background: #0052d9;
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 15px;

            span {
              width: 56px;
              height: 20px;
              font-size: 14px;
              font-family: PingFang TC, PingFang TC-Regular;
              font-weight: Regular;
              text-align: right;
              color: #ffffff;
              line-height: 15px;
            }
          }
        }
      }
    }
  }



  :deep(.el-card__footer) {
    padding: 0 !important;
  }

  :deep(.el-card__body) {
    padding: 0px 20px;
  }

  :deep(.el-card) {
    --el-card-border-color: #fff;
  }
}

.NoLitigation {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  // background: #F2F5F9;

  .NoLitigation_title {
    margin: 60px 0 10px 0;
    width: 168px;
    height: 50px;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #202020;
    line-height: 50px;
  }

  .cardMain {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 1300px;
    // padding: 0 320px;
    // margin: 0 180px;

    .el-card {
      width: 289px;
      height: 218px;
      margin: 15px 15px;
      background: #F0F3F8;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // background: url('@/assets/serviceImgs/service-bg1.png') no-repeat;
      // background-size: 100% 100%;
    }

    .card-header {
      display: flex;
      justify-content: space-between;

      .card-title {
        width: 96px;
        height: 22px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: left;
        color: #202020;
        line-height: 22px;
      }
    }

    .card-info {
      width: 242px;
      height: 44px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #575966;
      line-height: 22px;
    }

    .card-price {
      margin-top: 20px;

      :nth-child(1) {
        width: 91px;
        height: 32px;
        font-size: 28px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: left;
        color: #ff4600;
        line-height: 32px;
      }

      :nth-child(2) {
        width: 35px;
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #202020;
        line-height: 22px;
      }
    }

    .card-footer {
      display: flex;
      width: 100%;
      justify-content: flex-end;
      height: 63px;
      align-items: flex-end;
      // text-emphasis: none;
      text-align: center;
      line-height: 40px;
      // padding: 0 1px;

      .consult {
        width: 203px;
        height: 40px;
        background: #759FE7;
        border-radius: 0px 0px 0px 4px;

        span {
          width: 56px;
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: Medium;
          text-align: left;
          color: #ffffff;
          line-height: 20px;
        }
      }

      .buy {
        width: 203px;
        height: 40px;
        background: #004CD1;
        border-radius: 0px 0px 4px 0px;
        // padding: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          width: 56px;
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: Medium;
          text-align: left;
          color: #ffffff;
          line-height: 20px;
        }
      }
    }

  }

  :deep(.el-card__footer) {
    padding: 0 !important;
  }

  :deep(.el-card__body) {
    padding: 0px 20px;
  }

  :deep(.el-card) {
    --el-card-border-color: #F0F3F8;
  }
}

.safeguardMain {
  :deep(.el-card__body) {
    padding: 0px !important;
  }

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  // background: #F2F5F9;
  .safeguard_title {
    margin: 60px 0 10px 0;
    width: 168px;
    height: 50px;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #202020;
    line-height: 50px;
  }

  .cardMain {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 1300px;
    margin-bottom: 40px;


    .el-card {
      width: 625px;
      height: 356px;
      margin: 15px 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .safeguard_content {
      width: 625px;
      background: #F2F5F8;
      box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
      border-radius: 5px;

      .safeguard_img {
        width: 625px;
        height: 264px;
        background: url("https://pic.imgdb.cn/item/65fc18e49f345e8d03756f8c.png");
        background-size: 100% 100%;
        overflow: hidden;

        .safeguard_img_title {
          display: flex;
          align-items: center;
          margin: 30px 0 20px 30px;

          .line {
            width: 8px;
            height: 28px;
            background: #0052d9;
            margin-right: 10px;
          }

          .safeguard_img_title_text {
            width: 168px;
            height: 50px;
            font-size: 24px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: Semibold;
            text-align: left;
            color: #202020;
            line-height: 50px;
          }
        }
      }

      .safeguard_img_content {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .safeguard_img_content_left {
          // flex: 1;
          margin-left: 30px;

          ul {
            margin-top: -15px;
          }

          li {
            margin: 20px 0;

            .safeguard_line-nospan {
              width: 64px;
              height: 24px;
              font-size: 16px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: Regular;
              text-align: center;
              color: #575966;
              line-height: 24px;
              margin-right: 20px;
            }

            .safeguard_line-number {
              width: 38px;
              height: 24px;
              font-size: 16px;
              font-family: PingFang SC, PingFang SC-Semibold;
              font-weight: Semibold;
              text-align: left;
              color: #0052d9;
              line-height: 24px;
            }

            .safeguard_line-span {
              width: 64px;
              height: 24px;
              font-size: 16px;
              font-family: PingFang SC, PingFang SC-Semibold;
              font-weight: Semibold;
              text-align: center;
              color: #202020;
              line-height: 24px;
            }
          }
        }

        .safeguard_img_content_right {
          flex: 0.5;

          .safeguard_line-nospan {
            width: 64px;
            height: 24px;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: center;
            color: #575966;
            line-height: 24px;
            margin-right: 20px;
          }

          .safeguard_line-number {
            width: 38px;
            height: 24px;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: Semibold;
            text-align: left;
            color: #0052d9;
            line-height: 24px;
          }

          ul {
            margin-top: -15px;
          }

          li {
            margin: 20px 0;
          }
        }

        ul li::marker {
          color: #0052d9;
        }

        ul {
          // flex: 1;
          // flex: 1;

          li {
            list-style: disc;
            list-style-color: #0052d9;
            // list-style-type: circle;
            list-style-position: inside;
          }
        }
      }

      .safeguard_info {
        // width: 100%;
        // padding: 10px 10px 30px 15px;
        height: 92px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #ffffff;
        background: linear-gradient(180deg, #f0f3f7, #fbfcfd);
        // border: 2px solid #ffffff;、
        border-radius: 4px;
        box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);

        .safeguard_info_title1 {
          width: 270px;
          height: 40px;
          background: #ffffff;
          border: 1px solid #0052d9;
          display: flex;
          justify-content: center;
          align-items: center;

          span {
            width: 64px;
            height: 22px;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: center;
            color: #0052d9;
            line-height: 22px;
          }
        }

        .safeguard_info_title2 {
          width: 270px;
          height: 40px;
          background: #0052d9;
          display: flex;
          justify-content: center;
          align-items: center;

          span {
            width: 64px;
            height: 22px;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: Medium;
            text-align: center;
            color: #ffffff;
            line-height: 22px;
          }
        }
      }
    }
  }


}

.servicepro-main {

  // display: flex;
  // justify-content: center;
  // // align-items: center;
  // flex-direction: column;
  .masking_title_box {
    width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: center;

    .masking_title {
      // width: 100%;

      // align-items: center;
      // margin: 0 auto;
      margin: 30px 0 20px 0;
      // width: 112px;
      height: 50px;
      font-size: 28px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: Medium;
      text-align: center;
      color: #202020;
      line-height: 50px;
    }
  }

  .masking_box {
    .servicepro {
      display: flex;
      justify-content: center;
      // height: 100%;
      align-items: center;
      // margin-top: 30px;
      position: relative;

      .row-line {
        position: absolute;
        height: 1px;
        background: #d3d8e3;
        width: 45%;
        left: 50%;
        top: 60%;
        z-index: 1;
        transform: translate(-50%, -50%);
      }

      .top2 {
        margin-top: 90px
      }

      .masking-sort {
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;

        .masking-sort-name {
          z-index: 2;
          width: 170px;
          height: 24px;
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: Semibold;
          text-align: center;
          color: #181818;
          line-height: 24px;
        }

        .masking-sort-line {
          z-index: 2;
          width: 56px;
          height: 56px;
          background: linear-gradient(180deg, #f0f3f7, #ffffff);
          border: 2px solid #ffffff;
          border-radius: 50%;
          box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
          display: flex;
          justify-content: center;
          align-items: center;

          .sort-li {
            width: 27px;
            height: 40px;
            font-size: 24px;
            font-family: San Francisco Display, San Francisco Display-Bold;
            font-weight: Bold;
            text-align: center;
            color: #0052d9;
            line-height: 40px;
            letter-spacing: 1.33px;
          }
        }
      }
    }
  }



}



:deep(.el-card__header) {
  border-bottom: none
}

:deep(.el-card__footer) {
  border-top: none
}
</style>
